<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="纪德朝">
    <title>我的主页</title>
    <style>
    body{
        height: 100vh;
        margin: 0;
        background-color: lightblue;
        background-image: url('1.jpg');
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    h1{
        text-align: center;
        color: lightcoral;
        font-size: 50px;
    }
    .container{
        width: 800px;
        margin: 0 auto;
    }
    ul,li{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .current{
        margin-bottom: 20px;
    }
    a{
        text-decoration: none;
    }
    li.current>a{
        font-size: 30px;
        color: lightgreen;
        color: lightcoral;
    }
    li.current>a:hover{
        color: lightcyan;
        
    }
    .active{ 
        margin-left: 100px;       
        /* width: 200px; */
        /* height: 200px; */
        /* border: 2px solid lightcoral; */
        font-size: 20px;
        position: absolute;
        display: none; 
    }
    .container>li:hover .active{
        display: block;
    }
    .active>li{
        margin-bottom: 10px;
        width: 650px; 
        background-color: lightsalmon;
    }
</style>
</head>
<body>
    <h1>我的主页</h1>
    <div class="container">       
        <li class="current">
            <a href="#">之前的</a>
            <ul class="active">
                <li><a href="1.简易日历.html" target="_blank" title="日历">简易日历</a></li>
                <li><a href="2.百度新闻首页.html" target="_blank" title="百度首页首页">百度新闻首页</a></li>
                <li><a href="3.简易轮播图.html" target="_blank" title="轮播图">简易轮播图</a></li>
            </ul>
        </li>        
        <li class="current">
            <a href="#">08-08</a>
            <ul class="active">
                <li><a href="4.千图网.html" target="_blank" title="千图网">千图网</a></li>
            </ul>
        </li>        
        <li class="current">
            <a href="#">08-09</a>
            <ul class="active">
                <li><a href="./图片轮换/index.html" target="_blank" title="图片转换">图片转换</a></li>
                <li><a href="./提示框效果/index.html" target="_blank" title="提示框">提示框</a></li>
                <li><a href="./改变透明度/index.html" target="_blank" title="透明框">改变透明度</a></li>
            </ul>
        </li>
        <li class="current">
            <a href="#">08-10</a>
            <ul class="active">
                <li><a href="5.下拉菜单.html" target="_blank" title="下拉菜单">下拉菜单</a></li>
                <li><a href="6.优酷导航条.html" target="_blank" title="优酷导航条">优酷导航条</a></li>
            </ul>
        </li>
        <li class="current">
            <a href="#">08-11</a>
            <ul class="active">
                <li><a href="./唯品会/唯品会.html" target="_blank" title="唯品会">唯品会</a></li>
            </ul>
        </li>
        <li class="current">
            <a href="#">08-15</a>
            <ul class="active">
                <li><a href="./jQuery练习/1.jQuery下拉列表练习.html" target="_blank" title="jq选项卡">jq选项卡</a></li>
                <li><a href="./jQuery练习/2.下拉菜单.html" target="_blank" title="下拉菜单">下拉菜单</a></li>
                <li><a href="./jQuery练习//3.模拟select.html" target="_blank" title="模拟select">模拟select</a></li>
            </ul>
        </li>
        <li class="current">
            <a href="#">08-16</a>
            <ul class="active">
                <li><a href="./jQuery练习/4.列表.html" target="_blank" title="列表">列表</a></li>
                <li><a href="./jQuery练习/5.分期效果.html" target="_blank" title="分期">分期效果</a></li>
            </ul>
        </li>
        <li class="current">
            <a href="#">08-17</a>
            <ul class="active">
                <li><a href="./jQuery练习/6.鼠标进去遮罩层.html" target="_blank" title="遮罩层">遮罩层</a></li>
                <li><a href="./jQuery练习/7.jq轮播图.html" target="_blank" title="轮播图">jq轮播图</a></li>
            </ul>
        </li>
        <li class="current">
            <a href="#">08-19</a>
            <ul class="active">
                <li><a href="./jQuery练习/8.图片切换.html" target="_blank" title="图片切换">图片切换</a></li>
                <li><a href="./jQuery练习/9.星级评分.html" target="_blank" title="星级评分">星级评分</a></li>
                <li><a href="./jQuery练习/10.输入框字数判断.html" target="_blank" title="输入框字数判断">输入框字数判断</a></li>
            </ul>
        </li>
        <li class="current">
            <a href="#">08-23</a>
            <ul class="active">
                <li><a href="./小米商城demo/index.html" target="_blank" title="小米商城">小米商城</a></li>
            </ul>
        </li>
        <li class="current">
            <a href="#">08-24</a>
            <ul class="active">
                <li><a href="./小米商城demo/index.html" target="_blank" title="小米商城">小米商城</a></li>
            </ul>
        </li>
    </div>
</body>
<script>
    
</script>
</html>